<template>
<h3>电影变更</h3>
 <div class="movieCol">
        <label for="">电影名称:</label><input type="text" name="" id="" v-model.lazy="changeMovieInfo.name">
    </div>
    <div class="movieCol">
        <label for="">电影类型:</label>
        <template v-for="item in moviesType" :key="item._id">
            <input type="checkbox" :value="item.name" v-model="changeMovieInfo.types" id="moviesType">
            <label for="moviesType">{{ item.name }}</label>
        </template>

    </div>
    <div class="movieCol">
        <label for="">制片国家:</label>
        <select name="" id="" v-model="changeMovieInfo.country">
            <option :value="item.name" v-for="item in countries">{{ item.name }}</option>
        </select>
    </div>
    <div class="movieCol">
        <label for="">上映年份:</label>
        <input type="text" v-model="changeMovieInfo.year">
    </div>
    <div class="movieCol">
        <label for="">播放时长:</label>
        <input type="text" v-model="changeMovieInfo.duration">
    </div>
    <div class="movieCol">
        <label for="">是否热映:</label>
        <input type="radio" name="isHot" v-model="changeMovieInfo.hot" :value="1"><label for="">是</label>
        <input type="radio" name="isHot" v-model="changeMovieInfo.hot" :value="0"><label for="">否</label>
    </div>
    <button @click="">确认增加/修改</button>
</template>

<script setup>
import { ref } from 'vue';
const changeMovieInfo = ref({
    _id: new Date().getTime(),
    name: '',
    types: [],
    country: '',
    hot: '',
    duration: '',
    year: ''
})
defineProps(["countries","moviesType"])
</script>

<style scoped>

</style>